<template>
  <div class="total-container">
    <div class="flex-container">
      <div v-if="!!leftData" class="left-container">
        <div class="item-box" v-for="item in leftData" :key="item.name">
          <div class="title">{{ item.field_name }}</div>
          <div class="value">
            <div class="num">{{ item.field_value }}</div>
            <div class="unit">万元</div>
          </div>
        </div>
      </div>
      <div v-if="chartData.data1.data.length && chartData.data2.data.length" class="right-container">
        <bar :chart-data="chartData"></bar>
      </div>
    </div>
  </div>
</template>
<script>
import bar from '../../charts/bar.vue'
import { getGssybzgk, getGssylnqk } from '@/api/socialSecurity'
export default {
  name: 'industrialInjury',
  data() {
    return {
      leftData: null,
      chartData: {
        xAxis: {
          name: '',
          data: []
        },
        yAxis: {
          name: '单位：万人',
          data: ''
        },
        data1: { name: '收缴', data: [] },
        data2: { name: '支出', data: [] },
        unit: '万人'
      }
    }
  },
  components: {
    bar
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const [res, chartRes] = await Promise.all([getGssybzgk('工伤'), getGssylnqk('工伤')])
      this.leftData = res.result
      chartRes.result.forEach(item => {
        this.chartData.xAxis.data.push(item.year)
        this.chartData.data1.data.push(+item.pay_num)
        this.chartData.data2.data.push(+item.receive_num)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.total-container {
  height: 100%;
  .flex-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .right-container {
    height: 100%;
    margin-left: 20px;
  }
  .left-container {
    height: 100%;
    width: 103px;
  }
  .item-box {
    width: 103px;
    height: 59px;
    background: url('../../../img/right-row1-icon1.png') no-repeat center center;
    background-size: 100% 100%;
    padding: 6px;
    margin-top: 20px;
    .title {
      font-family: MicrosoftYaHei;
      font-size: 16px;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .value {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }
    .num {
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      font-size: 16px;
      color: #ffde00;
      line-height: 16px;
      text-align: right;
      font-style: normal;
      text-transform: none;
      background: radial-gradient(0deg, #ffffff 51%, #ffe5b9 54%, #ffc35b 100%);
    }
    .unit {
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: #ffffff;
      line-height: 12px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
